<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户列表</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/userList.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/userList.js"></script>
</head>
<body>
<div class="container mt-5">
    <h3>用户综合查询</h3>

    <form id="searchForm" class="mt-3">
        <div class="row">
            <div class="col-md-3">
                <input type="text" class="form-control" name="loginname" placeholder="用户名">
            </div>
            <div class="col-md-3">
                <input type="text" class="form-control" name="email" placeholder="邮箱">
            </div>
            <div class="col-md-2">
                <select class="form-control" name="status">
                    <option value="">状态</option>
                    <option value="0">正常</option>
                    <option value="1">禁用</option>
                </select>
            </div>
            <div class="col-md-2">
                <button type="button" id="searchBtn" class="btn btn-primary">查询</button>
                <a href="${pageContext.request.contextPath}/index.jsp" class="btn btn-secondary ml-2">返回首页</a>
            </div>
        </div>
    </form>

    <table class="table table-bordered mt-3">
        <thead>
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>姓名</th>
            <th>邮箱</th>
            <th>状态</th>
            <th>角色</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="userTableBody">
        <!-- 表格内容将通过JS动态加载 -->
        </tbody>
    </table>

    <nav aria-label="Page navigation">
        <ul class="pagination" id="pagination">
            <!-- 分页控件将通过JS动态生成 -->
        </ul>
    </nav>
</div>

<script>
    var currentPage = 1;
    var pageSize = 10;

    // 页面加载时查询数据
    $(function() {
        loadUserList();

        // 绑定查询按钮事件
        $("#searchBtn").click(function() {
            currentPage = 1;
            loadUserList();
        });
    });

    // 加载用户列表
    function loadUserList() {
        var params = {
            loginname: $("input[name='loginname']").val(),
            email: $("input[name='email']").val(),
            status: $("select[name='status']").val(),
            pageNum: currentPage,
            pageSize: pageSize
        };

        $.get("${pageContext.request.contextPath}/user/listData", params, function(result) {
            renderUserTable(result.data);
            renderPagination(result.total, result.pageNum, result.pages);
        });
    }

    // 渲染用户表格
    function renderUserTable(users) {
        var tbody = $("#userTableBody");
        tbody.empty();

        if (users && users.length > 0) {
            $.each(users, function(index, user) {
                var roleNames = "";
                if (user.roles && user.roles.length > 0) {
                    $.each(user.roles, function(i, role) {
                        roleNames += role.name + ", ";
                    });
                    roleNames = roleNames.substring(0, roleNames.length - 2);
                }

                var row = '<tr>' +
                    '<td>' + user.id + '</td>' +
                    '<td>' + user.loginname + '</td>' +
                    '<td>' + user.name + '</td>' +
                    '<td>' + (user.email || '') + '</td>' +
                    '<td>' + (user.status == 0 ? '正常' : '禁用') + '</td>' +
                    '<td>' + roleNames + '</td>' +
                    '<td>' +
                    '<a href="${pageContext.request.contextPath}/user/roles?userId=' + user.id + '" class="btn btn-sm btn-primary">设置角色</a>' +
                    '</td>' +
                    '</tr>';
                tbody.append(row);
            });
        } else {
            tbody.append('<tr><td colspan="7" class="text-center">暂无数据</td></tr>');
        }
    }

    // 渲染分页控件
    function renderPagination(total, pageNum, pages) {
        var pagination = $("#pagination");
        pagination.empty();

        // 上一页
        pagination.append('<li class="page-item ' + (pageNum == 1 ? 'disabled' : '') + '">' +
            '<a class="page-link" href="javascript:goPage(' + (pageNum - 1) + ')">上一页</a></li>');

        // 页码
        for (var i = 1; i <= pages; i++) {
            pagination.append('<li class="page-item ' + (pageNum == i ? 'active' : '') + '">' +
                '<a class="page-link" href="javascript:goPage(' + i + ')">' + i + '</a></li>');
        }

        // 下一页
        pagination.append('<li class="page-item ' + (pageNum == pages ? 'disabled' : '') + '">' +
            '<a class="page-link" href="javascript:goPage(' + (pageNum + 1) + ')">下一页</a></li>');
    }

    // 跳转到指定页
    function goPage(page) {
        currentPage = page;
        loadUserList();
    }
</script>
</body>
</html>
